<template>
  <div class="bj">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        class="moreswipe"
        v-for="(item, index) in lunbo"
        :key="index"
        >
      <div class="imgcontent"><img :src="item.src" 
      /></div> </van-swipe-item>
    </van-swipe>
    <div class="price">
      <p><span class="fl">&yen; {{content.sell_price}}</span> <span class="fr">&yen;{{content.market_price}}</span> </p>
      <p class="title">{{content.title}}</p>
    </div>
    <div class="contain">
      <van-divider content-position="left">详情介绍</van-divider>
      <div  v-html="content.content"></div>
  
    </div>
    <van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  round
  position="bottom"
  :style="{ height: '70%', paddingTop:'0.5rem',backgroundColor:'#f7f8fa'}"
>
<sku :content =content  @clicked='show=false' />
 </van-popup>       
     <van-action-bar >
 
  <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-action-bar-icon icon="cart-o" to="/shopcar/from" text="购物车" />
  <van-action-bar-icon icon="star-o" text="已收藏" color="#ff5000" />
  <van-action-bar-button color="#be99ff" @click="cartshop"  type="warning" text="加入购物车" />
  <van-action-bar-button color="#7232dd"  type="danger" text="立即购买" />
</van-action-bar>

  </div>

</template>

<script>
import {fetchgoodslunbo,fetchgoodsdetail }from "@/API/goods.js";
import { onBeforeMount } from '@vue/runtime-core';
import { ref } from 'vue';
import  sku  from '@/components/tosku.vue'
export default {
  name:"goodsdetail",
  props: {
    id: String || Number,
  },
  setup (props) {
    const lunbo = ref([]);
    const content = ref([]);
    const show = ref(false)
    const cartshop  = ()=>{
      show.value =true
    }
    onBeforeMount(async ()=>{
    // let reslut =await  fetchgoodslunbo(props.id);
    // let reslut2 =await  fetchgoodsdetail(props.id);
    let id =props.id
    let reslut3= await Promise.all([fetchgoodslunbo(id),fetchgoodsdetail(id)])
   
    lunbo.value = reslut3[0].message;
    content.value = reslut3[1].message;
    })
  
    return {
      lunbo,
      content,
      show,
      cartshop
    };
  },
  components:{
    sku
  }
};
</script>

<style lang="scss" scoped>

.bj{
  background-color:#f0eded ;
  .imgcontent{
    width: 15rem;
    height: 11rem;
    text-align: center;
  }

}
.my-swipe{
  background-color: #fff;
  // border-radius: 0.3rem;

  .moreswipe img{
    // width: 100%;
      height: 100%;
  }
}
.price{
  width: 14.5rem;
  background-color: #fff;
  margin: 0.3rem auto;
  padding: 0.4rem;
  border-radius: 0.3rem;
  box-sizing: border-box;
  p{
    margin: 0;
    margin-bottom: 00.5rem;
  }
  .fl{
    color: #ff3973;
    font-size: 1rem;
  }
  .fr{
    color: #ccc;
    font-size: 0.5rem;
    text-decoration: line-through;
  }
  .title{
    font-size: 0.8rem;
    color: rgb(102, 99, 99);
  }
}
.contain{
  width: 14.5rem;
  
    overflow: hidden;
    border-radius: 0.3rem;
    margin: 0 auto;
    background-color: #fff;
    padding-top: 0.1rem;
    ::v-deep p{
    font-size: 0.8rem;
    line-height: 1rem;
    text-align: center;
    }
   ::v-deep img{
     text-align: center;
      width: 14.5rem;
    }
}
</style>